<template>
  <div>
    <!-- 风险提示 -->
    <el-dialog
      v-model="show"
      title="风险提示"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      destroy-on-close
    >
      <div class="riskThatModel">
        <div v-html="RiskInfo"></div>
      </div>
      <el-checkbox
        class="mt_20"
        v-model="riskThatChecked"
        label="选择并同意遵守其内容"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="primary"
            @click="confirm"
            :disabled="!riskThatChecked"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defaultApi } from "@/servers";
import {
  computed,
  nextTick,
  onMounted,
  ref,
  watch,
  reactive,
  onUnmounted,
  toRefs,
  defineExpose,
} from "vue";
import { useStore } from "vuex";
const store = useStore();
const RiskInfo = ref(null);
const show = ref(false);
const riskThatChecked = ref(false);

onMounted(() => {
  getRisk();
});
function openModel() {
  show.value = true;
  riskThatChecked.value = false;
}
// 风险提示
async function getRisk() {
  let result = await defaultApi.risk();
  RiskInfo.value = result;
}
// 风险提示 确认
function confirm() {
  show.value = false;
  store.commit("system/SET", { key: "riskThatModel", value: false });
}

defineExpose({ openModel });
</script>

<style lang="scss" scoped>
.riskThatModel {
  max-height: 30vh;
  overflow: auto;
  white-space: pre-line;
}
@media screen and (max-width: 768px) {
  ::v-deep .el-dialog {
    width: 100%;
  }
}
</style>